<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<div class="panel-box">

<script>
	$(function(){
		
		$("#btnReply").click(function(){
			$.ajax({
			  method: "POST",
			  url: '${pageContext.request.contextPath}/backend/webboard/replyWebboard',
			  data: { webboard_id: '${WEBBOARDALLDATA.id}',content: $("#txtPostDetail").val(), postBy: "ผู้ดูแลระบบ" }
			}).done(function() {
			    location.reload();
			});
		});
		
	});
</script>
    <div class="titlebar">
       <span class="glyphicon glyphicon-th-list"></span> เว็บบอร์ด
    </div>
    <div class="panel-body">
    	<c:if test="${not empty WEBBOARDALLDATA}">
    		<table class="webboard">
                   	<thead>
                   		<tr>
                   			<th colspan="2" style="text-align: left">หัวข้อเรื่อง : ${WEBBOARDALLDATA.name}</th>
                   		</tr>
                   	</thead>
                   	<tbody>
                   		<tr>
                   			<td width="20%" height="150px" valign="top" style="text-align: left; padding:10px;">
                   				<img src="${pageContext.request.contextPath}/images/user.png" width="150px"/><br><br>
                   				<b>เขียนโดย</b> ${WEBBOARDALLDATA.createdBy}<br><b>เขียนเมื่อ</b> <fmt:formatDate pattern="yyyy-MM-dd" value="${WEBBOARDALLDATA.createdDate}" /><br>
                   				<b>เวลา</b> <fmt:formatDate pattern="HH:mm:ss" value="${WEBBOARDALLDATA.createdDate}" />
                   			</td>
                   			<td width="80%" valign="top" style="text-align: left; padding:10px;">
                   				${WEBBOARDALLDATA.content}
                   			</td>
                   		</tr>
                   	</tbody>
             </table>
             
             <div style="margin:20px;border:1px solid #ccc;padding:20px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;">
             	<form>
			      <div class="form-group">
				      <label for="txtPostDetail">คำตอบ : </label>
				      <textarea rows="5" name="txtPostDetail" id="txtPostDetail" class="form-control"></textarea>
			      </div>
			      <div class="form-group">
				      <label for="txtOwnName">ชื่อผู้ตอบ : </label>
				      <input type="text" name="txtPostBy" id="txtPostBy" class="form-control" value="ผู้ดูแลระบบ" disabled>
			      </div>
			      <div style="width:200px" class="center-block">
			      	 <button type="button" class="btn btn-default">ล้างข้อมูล</button>
        			 <button type="button" id="btnReply" class="btn btn-primary">ตอบกระทู้</button>
			      </div>
			  	</form>
             </div>
             
             <table class="webboard">
                   	<tbody>
	                   		<c:forEach items="${WEBBOARDALLDATA.listWebboardReply}" varStatus="i" var="x">
	                   		<tr>
	                   			<td width="20%" height="150px" valign="top" style="text-align: left; padding:10px;">
	                   			<c:choose>
		                   			<c:when test="${x.createdBy eq 'ผู้ดูแลระบบ'}">
		                   				<img src="${pageContext.request.contextPath}/images/admin.png" width="150px"/><br><br>
		                   			</c:when>
		                   			<c:otherwise>
		                   				<img src="${pageContext.request.contextPath}/images/user.png" width="150px"/><br><br>
		                   			</c:otherwise>
	                   			</c:choose>
	                   				
	                   				<b>เขียนโดย</b> ${x.createdBy}<br><b>เขียนเมื่อ</b> <fmt:formatDate pattern="yyyy-MM-dd" value="${x.createdDate}" /><br>
	                   				<b>เวลา</b> <fmt:formatDate pattern="HH:mm:ss" value="${x.createdDate}" />
	                   			</td>
	                   			<td width="80%" valign="top" style="text-align: left; padding:10px;">
	                   				${x.content}
	                   			</td>
	                   		</tr>
							</c:forEach>
                   	</tbody>
             </table>
    	</c:if>
    </div>
</div>